<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="/WEB-INF/templates/cadProfis.xhtml">
    <ui:param name="pPageTitle" value="Passo 1 de 5 | Dados Pessoais" />
    <ui:define name="formulario">
        <p:toolbar>
            <p:toolbarGroup align="right">
                <p:commandButton action="#{profissionalView.validarDados}" ajax="false"
                                 value="Próximo" icon="ui-icon-arrowthick-1-e"/>
            </p:toolbarGroup>
        </p:toolbar>

        <p:spacer width="10px"/>

        <h:panelGrid columns="2" cellpadding="2" columnClasses="textAlignRight,textAlignLeft,textAlignRight,textAlignLeft">  
            <p:outputLabel for="nome" value="${label['profis.nome']}"/>
            <p:inputText id="nome" required="true" value="#{profissionalView.profissional.nome}" label="${label['profis.nome']}"
                         size="60" maxlength="99" style="text-transform: capitalize"/>

            <p:outputLabel for="dataNasc" value="${label['profis.dtnasc']}"/>
            <p:inputMask id="dataNasc" value="#{profissionalView.profissional.datnas}" label="${label['profis.dtnasc']}" mask="99/99/9999" 
                         required="true" size="10"/>

            <p:outputLabel for="sexo" value="${label['profis.sexo']}"/>
            <p:selectOneRadio id="sexo" value="#{profissionalView.profissional.sexo}" 
                              label="${label['profis.sexo']}" required="true" rendered="true">
                <f:selectItems value="#{profissionalView.sexo}"/>
            </p:selectOneRadio>

            <p:outputLabel for="nat" value="${label['profis.nat']}" />
            <p:inputText id="nat" value="#{profissionalView.profissional.naturalidade}" label="${label['profis.nat']}" required="true" 
                         maxlength="30" size="50" style="text-transform: capitalize"/>

            <p:outputLabel for="estCiv" value="${label['profis.estCiv']}"/>
            <p:selectOneMenu id="estCiv" value="#{profissionalView.profissional.estCivil}" 
                             label="${label['profis.estCiv']}" required="true" rendered="true">
                <f:selectItem itemLabel="Selecione uma opção" noSelectionOption="true"/>
                <f:selectItems value="#{profissionalView.estCiv}"/>
            </p:selectOneMenu>

            <p:outputLabel for="cpf" value="${label['profis.cpf']}" />
            <p:inputMask id="cpf" value="#{profissionalView.profissional.cpf}" label="*${label['profis.cpf']}"
                         required="true" mask="999.999.999-99" size="15"/>

            <p:outputLabel value="${label['profis.crm']}" />
            <p:inputText id="crm" value="#{profissionalView.profissional.crm}" label="${label['profis.crm']}" required="true" 
                         maxlength="8" size="10"/>

            <p:outputLabel value="${label['profis.cns']}" />
            <p:inputMask id="cns" value="#{profissionalView.profissional.cns}" label="*${label['profis.cns']}"
                         mask="999.9999.9999.9999" size="20"/>

            <p:outputLabel for="cel" value="${label['foneCel']}"/>
            <p:inputMask id="cel" value="#{profissionalView.profissional.fonCel}" label="${label['foneCel']}" mask="(99) 9999-9999 ? (99) 9999-9999" 
                         size="23"/>

            <p:outputLabel for="foneR" value="${label['foneRes']}" />
            <p:inputMask id="foneR" value="#{profissionalView.profissional.fonRes}" label="${label['foneRes']}" mask="(99) 9999-9999 ? (99) 9999-9999" 
                         size="23"/>

            <p:outputLabel for="foneC" value="${label['foneCom']}" />
            <p:inputMask id="foneC" value="#{profissionalView.profissional.fonCon}" label="${label['foneCom']}" mask="(99) 9999-9999 ? (99) 9999-9999" 
                         size="23"/>

            <p:outputLabel value="${label['redeSocial']}" />
            <p:inputText id="redSocial" value="#{profissionalView.profissional.redeSoc}" label="${label['redeSocial']}" size="50" 
                         maxlength="100"/>

            <p:outputLabel value="Email" />
            <p:inputText id="email" value="#{profissionalView.profissional.email}" label="email" size="50" 
                         maxlength="100"/>
            
            <p:watermark for="redSocial" value="exp: https://www.facebook.com/JoaoSilva"/>
        </h:panelGrid>
        <h:outputText value="Os campos com ( * ) são de preenchimento obrigatório" style="color: red"/>
    </ui:define>
</ui:composition>